import React from'react'
import {connect} from 'react-redux'
import styles from './ListTab.scss'


class ListTab extends React.Component {
    constructor() {
        super();
        this.state = {
            "tabName": ["办理中","已完成","全部订单"]
        }
    }

    render() {
        let {selectedIndex, handleIndexChange} = this.props;
        return(

            <div className={styles.listTab}>
                <div className={selectedIndex==1?(styles.tab + " " + styles.tabChoice):styles.tab}>
                    <button onClick={() => {handleIndexChange("1","HOT")}}>{this.state.tabName[0]}</button>
                </div>
                <div className={selectedIndex==2?(styles.tab + " " + styles.tabChoice):styles.tab}>
                    <button onClick={() => {handleIndexChange("2","JIUJIU")}}>{this.state.tabName[1]}</button>
                </div>
                <div className={selectedIndex==3?(styles.tab + " " + styles.tabChoice):styles.tab}>
                  <button onClick={() => {handleIndexChange("3","ADD")}}>{this.state.tabName[2]}</button>
                </div>
                <div className={selectedIndex==1?styles.slideBorder:selectedIndex==2?(styles.slideBorder + " " + styles.slideBorderRight)
                    :(styles.slideBorder + " " + styles.slideBorderRightAdd)}></div>
            </div>
        )
    }
}

ListTab.defaultProps={
    selectedIndex:0,
    list:[
        {
            key:"2",
            name:"办理中",
        },
        {
            key:"8",
            name:"已完成",
        },
        {
            key:"a",
            name:"全部订单",
        },
    ],
    tabClick:()=>console.log(),
}

export default ListTab